//实践案例项目

<template>
    <div class="idea">
        <div class="header">
            <span>实践案例</span>
        </div>
         <div class="line"></div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" align="left"
            style="padding: 40px 0 20px; box-sizing: border-box;">
            <el-form-item>
                <el-input v-model="formInline.user" placeholder="请输入案例名称" style="width:315px;height:40px" />
            </el-form-item>
            <el-form-item label="推荐至首页" style="width:172px;height:35px">
                <el-select v-model="formInline.change" style="width: 172px;height: 35px;" placeholder="请选择">
                    <el-option label="请选择" value="请选择" />
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="onFind"
                    style="width:96px;height: 35px;background-color:rgb(255, 153, 0) ;">查询</el-button>
            </el-form-item>
        </el-form>
         <div class="line"></div>

        <!-- 新增实例案例 -->
        <el-form-item style="margin:10px">
            <el-button type="warning" @click="addPra"
                style="width:144px;height: 35px;background-color:rgb(255, 153, 0) ;">+新增案例实例</el-button>
        </el-form-item>

        <!-- 实例案例列表 -->

        <el-table :data="tableData" border :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <el-table-column prop="id" label="序号" width="56" align="center" />
            <el-table-column prop="name" label="案例名称" width="184" align="center" />

            <el-table-column label="案例介绍" width="301" align="center">
                <template #default="scope">
                    <span class="overflow">{{ scope.row.content }}</span>
                </template>

            </el-table-column>

            <el-table-column prop="checked" label="推荐至首页" width="112" align="center" />
            <el-table-column prop="num" label="排序" width="120" align="center">
                <template #default="scope">
                    <input type="text" v-model="scope.row.sort" class="number">
                </template>
            </el-table-column>
            <el-table-column label="操作时间" width="139" prop="time" align="center">
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button link type="warning" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
                    <el-button link type="warning" size="small" @click="handleremove(scope.row.id)">删除</el-button>
                    <!-- <el-button link type="warning" size="small">查看</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- <div style="display:flex;justify-content: space-between;align-items: center;">

            <el-pagination v-model:currentPage="currentPage" :background="true" layout="prev, pager, next, jumper"
                :total="total" @current-change="handleCurrentChange" />

        </div> -->
        <div style="display:flex;justify-content: space-between;align-items: center;">
            <div>
                共 {{ tableData.length }} 项
            </div>
            <div class="demo-pagination-block"
                style="display:flex; justify-content: center;align-items: center;margin: 20px;">
                <span>
                    共{{ Math.ceil(total / size) }}页/

                </span>
                <el-pagination @size-change="sizeChange" background @current-change="currentChange" :page-size="size"
                    :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>

            </div>
        </div>
    </div>
</template>

<script setup >
import { constant, get } from 'lodash';
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { hqpermset } from '../../api';
import { ElMessageBox, ElMessage } from 'element-plus'
import usePraStore from '../../store/pra'
const store = usePraStore()

const input = ref('0')
const router = useRouter()
//总条目数
const total = ref(0)

//一页多少条
const size = ref(10)

const pageSizes = ref([5, 10, 20, 30, 40])

//第几页
const page = ref(1)

//添加
const addPra = () => {
    router.push({
        path: '/content/newpractice'
    })
}

const currentChange = (val) => {
    page.value = val;
    getData()
    console.log(`current page: ${val}`)
}


const sizeChange = (val) => {
    console.log(val)
    size.value = val
    page.value = 1
    getData()
}

//渲染数据
const tableData = ref([])


// const total = tableData.value.length

// onMounted(async () => {
//     const result = (await hqpermset())
//     tableData.value = result
// })

onMounted(() => {
    getData()
})
const getData = () => {
    tableData.value = store.pra.slice(
        (page.value - 1) * size.value,
        page.value * size.value)
    total.value = store.pra.length

}
// tableData.value = store.pra


//删除
const handleremove = (id) => {
    // console.log(id);

    ElMessageBox.confirm(
        '是否删除当前数据?',
        '删除提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    ).then(() => {
        const res = tableData.value.filter(item => {
            return item.id !== id;
        })

        store.pra = res

        tableData.value = store.pra
    })
        .catch(() => { })
}

//编辑
const handleClick = (id) => {
    router.push({
        path: '/content/newpractice',
        query: {
            id,
        }
    })

}


//查询
const formInline = reactive({
    user: '',
    region: '',
    change: '',
})
//查询
const onFind = () => {
    // console.log('onFind!')l
    // console.log(formInline.user);
    // console.log(formInline.change);

    if (formInline.user || formInline.change) {
        if (formInline.user) {
            tableData.value = tableData.value.filter(item => {
                return item.name == formInline.user
            })
            total.value = tableData.value.length
        }

    } else {
        ElMessage.warning('请输入查询内容')
    }
}


//
</script>


<style  lang="less" scoped>
.header {
    width: 100%;
    height: 40px;
    padding: 5px;
    color: rgb(255, 153, 0);
    line-height: 30px;

    span {
        display: inline-block;
        width: 100px;
        height: 26px;
        border-left: 6px solid rgb(255, 153, 0);
        padding: 5px;
    }
}

.line {
    height: 10px;
    width: 100%;
    background-color: rgb(246, 239, 239);
}

.number {
    width: 60px;
    height: 30px;
    text-align: center;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-form-inline {
    margin: -30px 10px;
    margin-bottom: -50px;
    box-sizing: border-box;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}


.overflow {
    width: 301px;
    // height: 58px;
    // display: -webkit-box;
    // -webkit-line-clamp: 2;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>